<template>
  <div class="edit-address">
    <van-nav-bar
      title="编辑地址"
      left-arrow
      :fixed=true
      :border=true
      @click-left="handleToBack">
    </van-nav-bar>
    <van-address-edit
      :area-list="areaList"
      show-postal
      show-delete
      show-set-default
      show-search-result
      :addressInfo="addressInfo"
      :search-result="searchResult"
      @save="onSave"
      @delete="onDelete"
      style="margin-top: 52px" />
  </div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex'
import areaList from '@/config/area.js'

export default {
  name: 'EditAddress',
  data () {
    return {
      areaList: areaList,
      addressInfo: {},
      searchResult: []
    }
  },
  mounted () {
    // 处理路由传过来的数据
    this.addressInfo = this.$route.params.content
  },
  methods: {
    ...mapMutations([
      'ADD_USER_SHOPPING_ADDRESS',
      'DELETE_USER_SHOPPING_ADDRESS',
      'CHANGE_USER_SHOPPING_ADDRESS'
    ]),
    // 1.返回上级界面
    handleToBack () {
      this.$router.go(-1)
    },
    // 2. 保存
    onSave (content) {
      this.CHANGE_USER_SHOPPING_ADDRESS({
        id,
        content
      })
      console.log(1)
      this.$router.back()
    },
    // 删除
    onDelete (content) {
      const id = content.id
      this.DELETE_USER_SHOPPING_ADDRESS({ id })
      this.$router.back()
    }
  }
}
</script>
<style lang="scss" scoped>
.edit-address {
  @include setAllcover(9999);
  background-color: $bg-color-page;

}
</style>

